<template>
    <view class="container">
        <img @tap="onLeft" class="icon" :src="disLeft ? disLeftSrc : leftSrc" alt="" />
        <text class="title">{{ title }}</text>
        <img @tap="onRight" class="icon" :src="disRight ? disRightSrc : rightSrc" alt="" />
    </view>
</template>

<script>
export default {
    props: {
        title: String,
        // 期刊是否是第一期
        disLeft: Boolean,
        // 期刊是否是最后一期
        disRight: Boolean

    },
    data () {
        // navi左右点击图标，向左或者向右切换
        return {
            // 左边不可以点击，图片为白色
            disLeftSrc: '../../static/last-disble.png',
            // 左边可以点击，图片为黑色
            leftSrc: '../../static/triangle@left.png',
            // 右边不能点击，图片为白色
            disRightSrc: '../../static/next-disble.png',
            // 右边可以点击。图片为黑色
            rightSrc: '../../static/triangle@right.png'
        }
    },
    methods: {
        onLeft () {
            // 如果期刊不是最后一期，那么左边才可以点击
            if (!this.disLeft) {
                this.$emit('left')
            }
        },
        onRight () {
            // 如果期刊不是第一期，那么右边才可以点击
            if (!this.disRight) {
                this.$emit('right')
            }
        }

    }
}
</script>

<style lang='scss' scoped>
.container {
    width: 600rpx;
    height: 80rpx;
    background-color: #f7f7f7;
    border-radius: 2px;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.icon {
    height: 80rpx;
    width: 80rpx;
}
.title {
    font-size: 28rpx;
}
</style>
